<template>
  <div class="my-playlist" @click.self="$parent.showMyPlayList = false">
    <!-- 如果播放队列有歌 -->
    <section v-if="playlist.length > 0 || playlistFootprints.length > 0">
      <van-dropdown-menu active-color="#1c8cd7" duration="0.25">
        <van-dropdown-item v-model="active" :options="option" />
      </van-dropdown-menu>

      <!-- 播放队列 -->
      <div class="list">
        <!-- 单曲足迹 -->
        <div v-if="active === 0">
          <div v-if="playlist.length">
            <header v-show="isEditing">
              <div class="left">
                <span>{{ isCheckedCount }}/{{ playlistCount }} </span>
              </div>

              <div
                class="right"
                @click.self="closeMyPllayListAndClearAllSongInPlaylist"
              >
                清空队列
              </div>
            </header>

            <HistorySongItem
              v-for="item in playlist"
              :key="item.id"
              :item="item"
              :isEditing="isEditing"
            />
          </div>

          <div v-else>
            <van-empty description="没有正在播放的歌曲" />
          </div>
        </div>

        <!-- 歌单足迹 -->
        <div v-else-if="active === 1">
          <div v-if="playlistFootprints.length">
            <HistoryPlaylistItem
              v-for="item in playlistFootprints"
              :key="item.id"
              :item="item"
            />
          </div>

          <div v-else>
            <van-empty description="暂无歌单足迹" />
          </div>
        </div>

        <!-- 最近单曲 -->
        <div v-else-if="active === 2">
          <div v-if="playlist.length">
            <RecentSingleItem
              v-for="item in playlist"
              :key="item.id"
              :item="item"
              :isEditing="isEditing"
              :playData="playData"
            />
          </div>

          <div v-else>
            <van-empty description="暂无最近单曲" />
          </div>
        </div>
      </div>

      <!-- 当前队列选中的歌数量 -->
      <div class="circle" v-if="isEditing">{{ isCheckedCount }}</div>

      <!-- 底部交互条 -->
      <div class="bottom-tools" v-if="active === 0 && playlist.length > 0">
        <div class="left" @click="handChange" v-if="!isEditing">
          <div class="iconEdit icon_base"></div>
        </div>

        <div class="left" @click="handExit" v-else>
          <div class="iconExit icon_base"></div>
        </div>

        <div
          class="middle icon_base"
          v-if="isEditing"
          @click="handDelete"
        ></div>
        <div
          class="right icon_base"
          @click="$parent.showMyPlayList = false"
        ></div>
      </div>
    </section>

    <!-- 没有歌 -->
    <section v-else-if="playlist.length === 0" class="msg">
      <van-empty description="没有正在播放的歌曲" />
    </section>
  </div>
</template>

<script>
import HistorySongItem from "../basics/HistorySongItem.vue";
import HistoryPlaylistItem from "../basics/HistoryPlaylistItem.vue";
import RecentSingleItem from "../basics/RecentSingleItem.vue";

import { mapState } from "vuex";
import Vue from "vue";
export default {
  components: {
    HistorySongItem,
    HistoryPlaylistItem,
    RecentSingleItem,
  },

  computed: {
    ...mapState(["playlist", "currentSong", "playlistFootprints"]),

    // 播放队列有多少首歌
    playlistCount() {
      return this.playlist.length;
    },

    // 计算是否全选
    isAllChecked() {
      if (this.playlist.length === 0) return false;
      return this.playlist.every((song) => song.isChecked);
    },

    // 计算已选择的歌曲数量
    isCheckedCount() {
      if (this.isEditing) {
        return this.playlist
          .map(({ isChecked }) => isChecked)
          .filter((bool) => bool).length;
      }
    },
  },

  data() {
    const option = [
      { text: "单曲足迹", value: 0 },
      { text: "歌单足迹", value: 1 },
      { text: "最近单曲", value: 2 },
    ];

    return {
      isEditing: false, // 是否正在编辑

      active: 0,
      option,

      playData: [], // 播放列表数据
    };
  },

  methods: {
    // 当前播放队列有歌才进入编辑
    handChange() {
      this.isEditing = true;
    },

    // 退出编辑
    handExit() {
      this.isEditing = false;

      // 重置多选框状态
      this.playlist.forEach((item) => {
        Vue.set(item, "isChecked", false);
      });
    },

    // 删除已选中
    handDelete() {
      // 看我骚操作
      const { currentSong: song } = this;

      // 如果选中了多个
      if (this.isCheckedCount > 0) {
        this.$store.commit("deleteCheckedSongInPlaylist", { song });
      } else {
        this.$toast({
          type: "fail",
          message: "请先选择歌曲",
          position: "middle",
        });
      }
    },

    // 清空播放队列，确认后才下降我的歌单组件
    closeMyPllayListAndClearAllSongInPlaylist() {
      this.$store.dispatch("confirmClearPlaylist").then((is) => {
        if (is) {
          setTimeout(() => {
            this.$parent.showMyPlayList = false;
          }, 900);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.my-playlist {
  width: 100vw;
  height: 100vh;
  background-color: #2928286c;
  position: fixed;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  section {
    width: 100%;
    height: 70vh;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list {
      width: 100%;
      height: 320px;
      overflow: scroll;
      position: relative;
      flex: 1;

      header {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: transparent;
        z-index: 4;

        .left {
          flex: 1;

          span {
            color: #707070;
            font-size: 12px;
          }
        }

        .right {
          color: #707070;
          font-size: 12px;
        }
      }
    }

    .circle {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #3697fb;
      position: absolute;
      right: 20px;
      bottom: 100px;
      color: #fff;
      text-align: center;
      line-height: 35px;
      font-size: 12px;
    }

    .bottom-tools {
      width: 98%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: 0;
      z-index: 4;

      .left,
      .middle,
      .right {
        width: 50px;
        height: 100%;
      }

      .left {
        .iconEdit,
        .iconExit {
          width: 100%;
          height: 50px;
        }

        .iconEdit {
          background-image: url("../../assets/编辑.png");
        }

        .iconExit {
          background-image: url("../../assets/kugou/退出.png");
        }
      }

      .middle {
        background-image: url("../../assets/kugou/垃圾桶.png");
      }

      .right {
        background-image: url("../../assets/向下_黑色.png");
      }
    }
  }

  section.msg {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
